<template>
  <div>
    <navs/>
    <div class="previewPage">
      <div class="preview-items">
        <div class="line">
          <h4>前后台</h4>
          <ul>
            <li>
              <input type="radio" id="011" name="front" :checked="0 == is_admin" v-on:click="checkAdmin(0)">
              <label for="011">前台效果</label>
            </li>
            <li v-if="admin_show">
              <input type="radio" name="front" id="012" :checked="1 == is_admin" v-on:click="checkAdmin(1)">
              <label for="012">后台效果</label>
            </li>
          </ul>
        </div>
        <div class="line">
          <h4>板块</h4>
          <ul>
            <li v-for="(item,index) in plate[is_admin]" v-if="item != null" v-on:click="checkPlate(item.id)">
              <input type="radio" :id="'plate'+index"  :checked="item.id == plate_check"  name="plate">
              <label :for="'plate'+index">{{item.plate_name}}</label>
            </li>
          </ul>
        </div>
        <div class="line">
          <h4>页面</h4>
          <ul>
            <li v-for="(item,index) in page[plate_check][is_admin]" v-if="item != null"  v-on:click="checkPage(item.page_id)">
              <input type="radio" :id="'page'+index" :checked="item.page_id == page_check" :name="'page'+plate_check">
              <label :for="'page'+index">{{item.page_name}}</label>
            </li>
          </ul>
        </div>
      </div>
      <div class="func-box">
        <div class="title">
          <h3>效果展示</h3>
          <div>
            <router-link class="link" to="/previewFunc">功能预览</router-link>
          </div>
        </div>
        <div class="funcs">
          <div class="member-login">
            <div class="member-box">
              <div class="swipper-box content">
                <div class="swipper">
                  <swiper :options="swiperOption" class="swiper-box">
                    <swiper-slide class="swiper-item" v-for="(file,i) in files[page_check]"><img :src="file.path" alt=""></swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                  </swiper>
                </div>
              </div>
              <div class="detail content">
                <h4>说明</h4>
                <div class="explain">
                  {{des[page_check]}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footers/>
  </div>
</template>
<script>
    import navs from '../components/nav'
    import footers from '../components/footer'
    import axios from 'axios'
    export default {
        name: 'previewMod',
        created: function() {
            var that=this;
            var checklist=localStorage.getItem('list');
            var type=localStorage.getItem('type');
            that.list=JSON.parse(checklist);
            that.type=(JSON.parse(type) == undefined)?[]:JSON.parse(type);

            var page=[];
            var plate=[];
            if(that.list.gongnen_list!=undefined){
                that.list.gongnen_list.forEach(function(value,index,array){
                    if(value){
                        value.forEach(function(value_child,index_child,array_child){
                            if(value_child){
                                (page[value_child.plate_id]==undefined)?page[value_child.plate_id]=[]:"";

                                var plate_obj={};
                                var obj={};
                                plate_obj.id=value_child.plate_id
                                plate_obj.plate_name=value_child.plate_name;

                                obj.page_name=value_child.page_name;
                                obj.page_id=index_child;

                                //后台页面
                                if(index==1){
                                    (plate[1]==undefined)? plate[1]=[]:"";
                                    plate[1][value_child.plate_id]=plate_obj;

                                    (page[value_child.plate_id][1]==undefined)? page[value_child.plate_id][1]=[]:"";
                                    page[value_child.plate_id][1].push(obj);
                                }else{
                                    //前端页面
                                    (plate[0]==undefined)? plate[0]=[]:"";
                                    plate[0][value_child.plate_id]=plate_obj;

                                    (page[value_child.plate_id][0]==undefined)? page[value_child.plate_id][0]=[]:"";
                                    page[value_child.plate_id][0].push(obj);
                                }


                            }
                        });
                    }
                });
            }
            (plate[1]!=undefined)? plate[1] = plate[1].filter(function(n){ if(n){ return n } }):that.admin_show=false;
            (plate[0]!=undefined)? plate[0] = plate[0].filter(function(n){ if(n){ return n } }):"";
            that.plate_check=plate[0][0].id;
            that.page_check=page[that.plate_check][0][0].page_id;

            /*console.log(plate);
            console.log(page);*/

            var files=[];
            var des=[];
            axios.post(this.HOST+'/api/Index/getPageResource',{

            }).then(function (response) {
                that.page_file=response.data.data.info;
                page[that.plate_check].forEach(function(vulue,index,array){
                    if(vulue){
                        files[vulue.page_id]=(that.page_file[vulue.page_id]==undefined)?[]:that.page_file[vulue.page_id].files;
                        des[vulue.page_id]=(that.page_file[vulue.page_id]==undefined)?[]:that.page_file[vulue.page_id].des;
                    }

                })

                that.files=files;
                that.des=des;

                // console.log(files);

            }).catch(function (response) {
                console.log(response);
            });

            that.page=page;
            that.plate=plate;
        },
        data() {
            return {
                swiperOption: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                    loop : true,
                    delay: 3500,
                    speed: 750,
                    autoplay: true,
                    mousewheel: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    }
                },
                plate_check:0,
                page_check:0,
                page:[],
                page_file:[],
                plate:[],
                files:[],
                des:[],
                is_admin:0,
                admin_show:true
            }
        },
        methods:{
            checkAdmin(index){
                this.is_admin=index;
                this.plate_check=this.plate[index][0].id;
                this.page_check=this.page[this.plate_check][index][0].page_id;
            },
            checkPlate(index){
                this.plate_check=index;
                this.page_check=this.page[this.plate_check][0][0].page_id;
            },
            checkPage(index){
                this.page_check=index;
            }
        },
        components: {
            navs,
            footers
        }
    }
</script>

<style scoped>
  .swiper-box{
    height: 100%;
  }
  .previewPage {
    padding-bottom: 26px;
    min-height: 727px;
    background: #fff;
  }
  .preview-items {
    margin: 20px auto 50px;
    /*background: #fff;*/
    /*border-bottom: .1rem solid hsla(212,9%,63%,.3);*/
  }
  .preview-items .line {
    padding: 1.2rem 0;
    margin: 0 auto;
    max-width: 980px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
  }
  .preview-items .line h4 {
    width: 5rem;
    font-size: 1.4rem;
    margin-right: 2rem;
  }
  .preview-items .line ul {
    max-width: 883px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-wrap:wrap;
  }
  .preview-items .line ul li {
    min-width: 140px;
    display: block;
    position: relative;
    width: 10rem;
    height: 2.4rem;
    line-height: 2.4rem;
    color: #979fa8;
    font-size: 1rem;
    text-align: center;
    background: #fff;
    border: 1px solid hsla(212,9%,63%,.3);
    margin-top: 5px;
  }

  .preview-items .line ul li input[type="radio"] {
    position: absolute;
    top: 0;
    visibility: hidden;
  }
  .preview-items .line ul li label {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .preview-items .line ul li input[type="radio"]:checked + label {
    background: #4289db;
    color: #fff;
  }
  .func-box .funcs {
    margin: 2rem auto 0;
    max-width: 980px;
    padding: 3rem 1rem 4rem;
    border-radius: .4rem;
    background-color: #f0f2f5;
    width: 100%;
  }
  .func-box h3 {
    font-size: 1.6rem;
    text-align: center;
  }
  .func-box h4 {
    font-size: 1.4rem;
  }
  .func-box .funcs .member-box {
    padding: 1rem 2rem;
    margin: 0 auto;
  }
  .func-box .funcs .member-box .swipper {
    width: 60rem;
    height: 32rem;
    position: relative;
    padding: 1rem 3rem;
    margin: 0 auto;
  }
  .func-box .funcs .content {
    margin: 1rem auto;
  }
  .member-box .swipper ul li img {
    width: 100%;
    height: 100%;
  }
  .funcs .member-box .swipper img.arrow {
    position: absolute;
    top: 50%;
    margin-top: -1.5rem;
    width: 3rem;
    height: 3rem;
    padding: 0.5rem;
    border-radius: 1.5rem;
    background: #fff;
    cursor: pointer;
  }
  .funcs .member-box .swipper img.arrow.left {
    left: -1rem;
  }
  .funcs .member-box .swipper img.arrow.right {
    right: -1rem;
  }
  .funcs .detail {
    width: 100%;
    font-size: 1rem;
  }
  .funcs .detail .explain {
    width: 100%;
    border-radius: 0.4rem;
    background: #fff;
    padding: 1rem 3rem;
    text-align: center;
    line-height: 1.5rem;
  }
  .funcs .content h4 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  .funcs .date-time, .funcs .date-time table {
    width: 100%;
  }
  .funcs .date-time table {
    background: #fff;
    border-collapse:collapse;
    border-color: hsla(212,9%,63%,.2);
  }
  .funcs .date-time table td, .funcs .date-time table th {
    padding: 0.5rem;
    text-align: center;
  }
  .funcs .date-time table th {
    background: #f3f5f7;
  }
  .func-box .title {
    margin: 0 auto;
    max-width: 980px;
    height: 3rem;
    position: relative;
  }
  .func-box .title div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .func-box .title .link {
    display: inline-block;
    width: 8rem;
    height: 2.4rem;
    line-height: 2.4rem;
    color: #fff;
    background: #4289db;
    border-radius: 0.4rem;
    text-align: center;
    position: absolute;
    right: 0;
    font-size:1rem;
  }
</style>

